<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="echarts.min.js"></script>
    <script src="china.js"></script>
    <script src="chalk.js"></script>
    <title>Title</title>
</head>
<body style="margin: 0px">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 100%;height:200px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化ECharts实例
    var myChart = echarts.init(document.getElementById('main'),'chalk');

    myChart.showLoading();

    option = {
    backgroundColor: '#0f1217',
        title: {
            text: '空气质量排行',
            textStyle: {
                    fontSize: 10
                },
            subtextStyle: {
                    fontSize: 5
                }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            right:0,
            data: ['AQI']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            show:false,
            position: 'top',
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            show:false,
            type: 'category'
        },
        series: [
            {
                name: 'AQI',
                type: 'bar',
                itemStyle:{
                normal:{
                        barBorderRadius:[0,5,5,0],
                        color:function(params){
                            if (params.data>70) {
                                return '#ff8700';
                            }else if(params.data>50){
                                return '#fbd128';
                            }else{
                                return '#40fde0';
                            }
                        }
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    function setRankData(msg1,msg2) {
        myChart.hideLoading();
        myChart.setOption({
        yAxis: {
            show:true,
            data: msg1
        },
        xAxis: {
            show:true,
        },
        series: [
            {
                data: msg2
            }
        ]});
    }

    function showTip(msg) {
        myChart.dispatchAction({
            type:'showTip',
            seriesIndex: 0,
            dataIndex: msg
        })
    }

</script>
</body>
</html>